<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        {{omType==1?'全部工单':omType==2?'全部办结':'全部待办'}}
		<view class="scrollTab">
		<scroll-view scroll-x="true">
        <view class="checkTab">
          <view v-for="(i,index) in columns1" :key="index" class="checkItem" @click="checkedTypeFn(i.value)">
            <view style="white-space: nowrap;" :class="typeValue !==i.value ? 'unchecked':''">
              {{i.name}}<text v-if='i.count'>({{i.count}})</text>
            </view>
            <view v-if="typeValue===i.value" class="selectedBottom"></view>
          </view>
        </view>
</scroll-view>
</view>
        <view class="header-wrap">
          <!-- <view class="selectName" @click="typeShow=true">{{typeText}}
						<image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
					</view> -->
          <view v-if="omType==1" class="selectName" @click="statusShow=true">{{statusText}}
            <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
          </view>
		  <view v-if="typeValue!=='3'&&typeValue!=='4'" class="selectName" @click="statusWtShow=true">{{statusWtText}}
		    <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
		  </view>
          <view class="item_search">
            <u-search shape="round" v-model="timeStr" bgColor="#f2f7f5" height="53" style="pointer-events: none"
              searchIcon="calendar" searchIconSize="26" placeholder="选择时间" :show-action="false" :disabled="true"
              @click="dateShow = true"></u-search>
            <image v-if="clearsDateShow" :class="omType==1?'clearImg':'clearImg2'" src="@/static/login/clear.png" @click="onClearsDate"></image>
          </view>

        </view>
      </u-sticky>
    </view>
    <view class="posBox">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 298rpx)' }">
        <view class="nodata" v-if="workList.length==0">
          <image class="noDataImg" src="@/static/icon/noData.png"></image>
        </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view v-for="(item, index) in workList" :key="index">
            <view class="task-item" @click="goToDetail(item)">
              <view class="clStatus" v-if="item.isIssue!=1">
                <image v-if="item.isHandle==2" style="width: 120rpx; height: 120rpx" mode="aspectFit"
                  src="@/static/icon/ycl-icon.png">
                  <image v-if="item.isHandle==1" style="width: 120rpx; height: 120rpx" mode="aspectFit"
                    src="@/static/icon/wcl-icon.png">
              </view>
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;">
                  <view class="line"></view>
                  {{item.terminalName}}
                  <!-- <text class="grey">工单编号:{{item.missionId}}</text> -->
                </view>
                <view class="type" :class="{type2:item.type==2,type3:item.type==1,type4:item.type==3}">
                  {{item.type==1?'日常运维':item.type==2?'工单处理':item.type==3?'水质检测':item.type==4?'公众反馈':''}}
                </view>
              </view>
              <view class="info-row"> <text :class="{width:item.type==3}">工单编号</text>{{item.missionId}}</view>
              <view class="info-row" v-if="item.type==4"> <text>反馈类型</text>{{item.feedBackType}}</view>
              <view class="info-row" v-if="item.type==4"> <text>问题描述</text>{{item.desc}}</view>
              <view class="info-row" v-if="item.type==2"> <text>问题类型</text>{{item.policeType}}</view>
              <view class="info-row" v-if="item.type==2&&item.policeDesc"> <text>处理说明</text>{{item.policeDesc}}</view>
              <view class="info-row" v-if="item.type==1" style="display: flex;">
                <text>有无问题</text>
                <view :class="{isIssue1:item.isIssue==1,isIssue2:item.isIssue==2}">{{item.isIssue==2?'有问题':'无问题'}}
                </view>
              </view>
              <view class="info-row" v-if="item.type==1&&item.isIssue==2"> <text>问题类型</text>{{item.omPoliceDesc}}</view>
              <view class="info-row" v-if="item.type==1&&item.omIssueDesc"><text>问题描述</text><text
                  class="ellipsis">{{item.omIssueDesc}}</text></view>
              <view class="info-row" v-if="item.type==1&&item.allMeasure"><text>处理措施</text><text
                  class="ellipsis">{{item.allMeasure}}</text></view>
              <view class="info-row" v-if="item.type==1"> <text>运维人员</text>{{item.om||''}}</view>
			   <view class="info-row" v-if="item.type==2&&item.om"> <text>运维人员</text>{{item.om}}</view>
              <view class="info-row" v-if="item.type==1&&item.isHandle==1"><text>运维时间</text>{{item.reportTime}}</view>
              <view class="info-row" v-if="item.type==1&&item.isHandle==2">
                <text>运维时间</text>{{item.checkTime}}~{{item.reportTime}}</view>
              <view class="info-row" v-if="item.type==3"> <text
                  style="width: 21%;">水质取样口</text>{{item.samplingPort==1?'入水口':item.samplingPort==2?'出水口':''}}
              </view>
              <view class="info-row" v-if="item.type!=1">
                <text
                  :class="{width:item.type==3}">{{item.isHandle==1?'提交时间':item.isHandle==2?'运维时间':''}}</text>{{item.date}}
              </view>
            </view>
          </view>

        </scroll-view>
        <u-picker :show="statusWtShow" keyName="name" :columns="[columns3]" @confirm="bindPickerChange1"
					@cancel="statusWtShow=false"></u-picker>
        <u-picker :show="statusShow" keyName="name" :columns="[columns2]" @confirm="bindPickerChange2"
          @cancel="statusShow=false"></u-picker>
        <van-calendar :show="dateShow" ref="calendar" :maxDate="maxDate" :minDate="minDate" monthNum="24"
          color="rgba(39, 105, 247, 1)" rowHeight="55" title="选择时间" type="range" @confirm="dateConfirm"
          @close="dateClose">
        </van-calendar>
        <!-- 问题处理弹窗部分 -->
        <u-popup :show="disposeShow" @close="close" @open="open" mode="center" round="10" closeable overlayOpacity='0.2'
          customStyle='margin: 0rpx 40rpx;'>
          <view class="title">问题处理弹窗</view>
          <view class="" v-if="item.type==1">
            <view class="infoBox">
              <view class="info-row-yw"> <text>终端名称</text>{{item.terminalName}} </view>
              <view class="info-row-yw">
                <text>有无问题</text>{{item.equIssue==2||item.waterIssue==2||item.facilityIssue==2?'有问题':'无问题'}}
              </view>
              <view class="filterType">
                <view class="text">问题类型</view>{{filterType}}
              </view>
              <view class="info-row-yw"> <text>问题描述</text>{{filterType2}}</view>
              <view class="info-row-yw"> <text>提交时间</text>{{item.reportTime}}</view>
              <view class="info-row-yw"> <text>提交人员</text>{{item.om||''}}</view>
              <view class="list-wrap" :style="{ height: 'calc(100vh - 1134rpx)' }">
                <scroll-view scroll-y="true" class="scroll-Y">
                  <view class="info-row3-yw" v-for="(t,index) in item.equDtoList" :key="index" v-if="t.isHandle==1">
                    <text style="color: #989898">{{t.name}}</text>
                    <u--input v-model="t.handleDetail" disabledColor="#ffffff" placeholder="请输入设备处理措施"></u--input>
                  </view>
                  <view class="info-row3-yw" v-for="(t,index) in item.statusDtoList" :key="index" v-if="t.isHandle==1">
                    <text style="color: #989898">{{t.name}}</text>
                    <u--input v-model="t.handleDetail" disabledColor="#ffffff" placeholder="请输入设施处理措施"></u--input>
                  </view>
                  <view class="info-row-yw" style="display: flex;" v-if="item.pic"><text>问题图片</text>
                    <view style="display: flex;flex-wrap: wrap;">
                      <image style="width: 120rpx; height: 120rpx;margin-right: 10rpx;"
                        v-for="(pic, index) in item.pic.split(',')" :src="pic" :key="index" mode="aspectFit"
                        @click="clickImg(pic, index)">
                      </image>
                    </view>
                  </view>
                  <view class="info-row-yw" style="display: flex;"><text>处理图片</text>
                    <u-upload width="120" height="120" :previewFullImage="true" :fileList="tp" name="tp"
                      @afterRead="afterRead" @delete="deletePic" multiple :maxCount="8">
                    </u-upload>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
          <view class="" v-if="item.type==4">
            <view class="infoBox">
              <view class="info-row"> <text style="width: 21%;">反馈类型</text>{{item.feedBackType}} </view>
              <view class="info-row"> <text style="width: 21%;">终端编号</text>{{item.terminalId}}</view>
              <view class="info-row"> <text style="width: 21%;">终端名称</text>{{item.terminalName}}</view>
              <view class="info-row"> <text style="width: 21%;">反馈姓名</text>{{item.profeedName||''}} </view>
              <view class="info-row"> <text style="width: 21%;">联系电话</text>{{item.profeedTel||''}} </view>
              <view class="info-row"> <text style="width: 21%;">居住地址</text>{{item.profeedAddr||''}} </view>
              <view class="info-row"> <text style="width: 21%;">提交时间</text>{{item.reportTime}} </view>
              <view class="info-row"> <text style="width: 21%;">问题描述</text>{{item.desc}}</view>
              <view class="info-row" style="display: flex;"> <text style="width: 21%;">问题图片</text>
                <view v-if="imgList" style="display: flex;">
                  <image style="width: 120rpx; height: 120rpx" v-for="(src, index) in imgList" :key="index" :src="src"
                    mode="aspectFit" @click="clickImg(src, index)">
                  </image>
                </view>
              </view>
              <view class="info-row3">
                <text style="color: #989898">处理措施</text>
                <!-- <u--input v-model="handleDtl" disabledColor="#ffffff" placeholder="请输入"></u--input> -->
                <u--textarea placeholder="请输入" v-model="handleDtl" height="100"></u--textarea>
              </view>
              <view class="info-row" style="display: flex;"><text style="width: 21%;">上传图片</text>
                <u-upload width="120" height="120" :previewFullImage="true" :fileList="tp" name="tp"
                  @afterRead="afterRead" @delete="deletePic" multiple :maxCount="6">
                </u-upload>
              </view>
            </view>
          </view>
          <view class="" v-if="item.type==2">
            <view class="infoBox">
              <view class="info-row"> <text>终端名称</text>{{item.terminalName}}</view>
              <view class="info-row"> <text>报警类型</text>{{item.policeType}} </view>
              <view class="info-row"> <text>设备编号</text>{{item.equNo}}</view>
              <view class="info-row"> <text>进出口</text>{{ item.drain==1?'进口':item.drain==2?'出口':''}}</view>
              <view class="info-row3-gd"> <text style="width: 29%;">问题描述</text>{{item.desc}}</view>
              <view class="info-row"><text>报警时间</text>{{ item.reportTime }}</view>
              <view class="info-row3-gd">
                <text>处理措施</text>
                <!-- <u--input v-model="meausre" disabledColor="#ffffff" placeholder="请输入"></u--input> -->
                <u--textarea placeholder="请输入" v-model="meausre" height="100"></u--textarea>
              </view>
              <view class="info-row" style="display: flex;"><text>上传图片</text>
                <u-upload width="120" height="120" :previewFullImage="true" :fileList="tp" name="tp"
                  @afterRead="afterRead" @delete="deletePic" multiple :maxCount="6">
                </u-upload>
              </view>
            </view>
          </view>
          <view class="" v-if="item.type==3">
            <view class="infoBox">
              <view class="info-row3"> <text>终端名称</text>{{item.terminalName}}</view>
              <view class="info-row3"> <text>水质取样口</text>{{item.samplingPort==1?'入水口':item.samplingPort==2?'出水口':''}}
              </view>
              <view class="info-row3" style="display: flex;"> <text>取样照片</text>
                <view v-if="item.pic" style="display: flex;flex-wrap: wrap;">
                  <image style="width: 120rpx; height: 120rpx" v-for="(pic,index) in item.pic.split(',')" :src="pic"
                    :key="index" mode="aspectFit" @click="clickImg(pic, index)">
                  </image>
                </view>
              </view>
              <view class="info-row3"><text class="text">氨氮</text>
                <u--input color="#000000" placeholder="请输入" v-model="formData.ammoNo"></u--input>
              </view>
              <view class="info-row3"><text class="text">COD</text>
                <u--input color="#000000" placeholder="请输入" v-model="formData.cod"></u--input>
              </view>
              <view class="info-row3"><text class="text">PH</text>
                <u--input color="#000000" placeholder="请输入" v-model="formData.ph"></u--input>
              </view>
              <view class="info-row3"><text class="text">总磷</text>
                <u--input color="#000000" placeholder="请输入" v-model="formData.totalP"></u--input>
              </view>
              <view class="info-row3"><text class="text">总氮</text>
                <u--input color="#000000" placeholder="请输入" v-model="formData.totalN"></u--input>
              </view>
              <view class="info-row3">文件上传<view class="uploadButton" @click="upLoadFile">
                  <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
                </view>
              </view>
              <view class="" style="display: flex;justify-content: space-between;">
                {{file.name}}
                <view v-if="file.name" class="" @click="deleteFile()">删除</view>
              </view>
            </view>
          </view>
          <view class="submitBtn">
            <u-button @click="submit" :loading="loading" class="custom-style" text="提交" color="#428ffc"
              throttleTime="1000">
            </u-button>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>
<script>
import {
  getDictItemInfo
} from '@/api/system.js';
import {
  getAllWorkOrderList,
  omMissionHandle,
  editProFeedback,
  addOmPoliceHandle,
  editWaterCommit,
  getYunweiCount
} from '@/api/yunwei.js';
import {
  commonUploadPic,
  commonUploadFile
} from '@/api/common.js';
export default {
  filters: {
    showTastStatusText() {
      return '--';
    },
  },
  computed: {
    filterType() {
      if (this.item.equDtoList || this.item.statusDtoList) {
        let arr = this.item.equDtoList.concat(this.item.statusDtoList)
        let arr2 = []
        arr.filter((item) => {
          if (item.isIssue == 2) {
            arr2.push(item.name)
          }
        })
        let str = arr2.join(',')
        return str;

      } else {
        return '';
      }
    },
    filterType2() {
      if (this.item.equDtoList || this.item.statusDtoList) {
        let arr = this.item.equDtoList.concat(this.item.statusDtoList)
        let arr2 = []
        arr.filter((item) => {
          if (item.isIssue == 2) {
            arr2.push(item.problemDetail)
          }
        })
        let str = arr2.join(',')
        return str;

      } else {
        return '';
      }
    }
  },
  data() {
    return {
      disposeShow: false,
      item: {},
      formRcyw: {
        equipmentMeasure: '',
        facilityMeasure: '',
        waterMeasure: ''
      },
      tp: [],
      tpSb: [],
      tpSt: [],
      handleDtl: '',
      imgList: [],
      meausre: '',
      formData: {
        ammoNo: '',
        cod: '',
        ph: '',
        totalP: '',
        totalN: ''
      },
      file: {
        name: '',
        path: ''
      },
      omType: '',
      columns1: [{
        name: '全部',
        value: '',
		count:0
      },
      {
        name: '日常运维',
        value: '1',
		count:0
      },
      {
        name: '工单处理',
        value: '2',
		count:0
      },
      {
        name: '水质检测',
        value: '3',
		count:0
      },
      {
        name: '公众反馈',
        value: '4',
		count:0
      }],
      columns2: [{
        name: '全部',
        value: '',
      },
      {
        name: '未处理',
        value: '1'
      },
      {
        name: '已处理',
        value: '2'
      }],
	  columns3: [{
	    name: '全部',
	    value: ''
	  },
	  {
	    name: '无问题',
	    value: '1'
	  },
	  {
	    name: '有问题',
	    value: '2'
	  }],
      timeStr: '',
      equTypeList: [],
      typeShow: false,
      statusShow: false,
	  statusWtShow: false,
      typeValue: '',
      statusValue: '',
	  statusWtValue: '',
      typeText: '全部',
      statusText: '全部',
	  statusWtText: '全部',
      clearsDateShow: false,
      startTime: '',
      endTime: '',
      dateShow: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      policeList: [],
      total: null,
      page: 1,
      pageSize: 40,
      workList: [],
      taskList: [],
      policeTypeShow: false,
      woType: '',

    };
  },
  onLoad(e) {
    this.omType = e.type
    if (e.type == 1) {
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    } else if (e.type == 2) {
      this.statusValue = 2
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    } else {
      this.statusValue = 1
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    }
  },
  onShow() {

  },
  created() {

  },
  mounted() { },
  methods: {
    checkedTypeFn(type) {
      this.typeValue = type
      this.page = 1
      this.pageSize = 40
      this.getAllWorkOrderList()
    },
    deleteFile() {
      this.file = {
        name: '',
        path: ''
      }
    },
    // 图片预览功能
    clickImg(url, index) {
      var imageArr = [];
      imageArr.push(url);
      //uniapp预览轮播图方法
      uni.previewImage({
        current: index, //预览图片的下标
        urls: imageArr //预览图片的地址，必须要数组形式
      })
    },
    goToBack() {
      const villageId = uni.getStorageSync('villageId')
      uni.navigateTo({
        url: `/pages/home/home?id=${villageId}`
      })
    },
    goToDetail(item) {
      this.item = item
      if (item.isHandle == 2) {
        console.log(item.isHandle, '22222222222');
        uni.navigateTo({
          url: `/subpack_TerminalDevice/yunweiDetail/index?type=${item.type}&id=${item.missionId}`
        })
      } else if (item.isHandle == 1) {
        this.disposeShow = true
        this.imgList = item.file?.split(',') || []
        if (item.type == 1 && item.handlePic) {
          this.tp = item.handlePic.split(',').map(x => {
            return {
              url: x
            }
          })
        } else {
          this.tp = []
        }
      }
    },
	async getYunweiCount() {
		const villageId = uni.getStorageSync('villageId')
		const isIssue=this.typeValue==3||this.typeValue==4?'':this.statusWtValue
		const res=await getYunweiCount({
			villageId,
			begin: this.startTime,
			end: this.endTime,
			status: this.statusValue,
			isIssue:isIssue,
		})
		let countData=res.data.data
		this.columns1[0].count=countData.total
		this.columns1[1].count=countData.omMissionNum
		this.columns1[2].count=countData.policeNum
		this.columns1[3].count=countData.waterNum
		this.columns1[4].count=countData.feedBackNum
		console.log(res.data);
	},
    async getAllWorkOrderList() {
      const villageId = uni.getStorageSync('villageId')
	  const isIssue=this.typeValue==3||this.typeValue==4?'':this.statusWtValue
      const res = await getAllWorkOrderList({
        villageId,
        begin: this.startTime,
        end: this.endTime,
        status: this.statusValue,
		isIssue:isIssue,
        type: this.typeValue,
        page: this.page,
        pageSize: this.pageSize
      })
      this.workList = res.data.data.voList || []
      this.total = res.data.data?.total || 0
      console.log(this.workList, '7.1111111111111111');
    },
    dateConfirm(e) {
      this.startTime = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.timeStr = this.startTime + '~' + this.endTime
      this.dateShow = false
      this.clearsDateShow = true
      this.page = 1
      this.pageSize = 40
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    },
    dateClose() {
      this.dateShow = false

    },
    onClearsDate() {
      this.timeStr = ''
      this.startTime = ''
      this.endTime = ''
      this.clearsDateShow = false
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    },
    bindPickerChange1: function(e) {
    	this.statusWtValue = e.value[0].value;
    	this.statusWtShow = false;
    	this.statusWtText = e.value[0].name
    	this.page = 1
    	this.pageSize = 40
    	this.getAllWorkOrderList()
		this.getYunweiCount()
    },
    bindPickerChange2: function (e) {
      this.statusValue = e.value[0].value;
      this.statusShow = false;
      this.statusText = e.value[0].name
      this.page = 1
      this.pageSize = 40
      this.getAllWorkOrderList()
	  this.getYunweiCount()
    },
    open() { },
    close() {
      this.disposeShow = false
    },
    async omMissionHandle() {
      const res = await omMissionHandle({
        ...this.item,
        id: this.item.missionId,
        handlePic: this.tp.map(item => item.url).join(','),
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: res.message
        })
        this.disposeShow = false
        this.page = 1
        this.getAllWorkOrderList()
		this.getYunweiCount()
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    async editProFeedback() {
      const res = await editProFeedback({
        id: this.item.missionId,
        handleDtl: this.handleDtl,
        status: 2,
        handlePictureUrl: this.tp.map(item => item.url).join(','),
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: res.message
        })
        this.disposeShow = false
        this.page = 1
        this.getAllWorkOrderList()
		this.getYunweiCount()
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    async addOmPoliceHandle() {
      const res = await addOmPoliceHandle({
        id: this.item.missionId,
        meausre: this.meausre,
        pic: this.tp.map(item => item.url).join(','),
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: res.message
        })
        this.disposeShow = false
        this.page = 1
        this.getAllWorkOrderList()
		this.getYunweiCount()
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    async editWaterCommit() {
      if (!this.file.name) {
        uni.showToast({
          icon: 'error',
          title: '请先上传文件',
        });
        return;
      }
      const annexStr = JSON.stringify(this.file)
      const res = await editWaterCommit({
        ...this.formData,
        id: this.item.missionId,
        file: annexStr === '{}' ? '' : annexStr,
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: res.msg
        })
        this.disposeShow = false
        this.page = 1
        this.getAllWorkOrderList()
		this.getYunweiCount()
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    upLoadFile() {
      wx.chooseMessageFile({
        count: 10,
        type: 'file',
        success: async (res) => {
          console.log('file:', res.tempFiles); // File对象
          // 可以在这里进行后续操作
          const result = await this.uploadFilePromise2(res.tempFiles[0]
            .path)
          this.file = {
            name: res.tempFiles[0].name,
            path: result
          }
        }
      })
    },
    async uploadFilePromise2(url) {
      const res = await commonUploadFile(url)
      console.log(res, 'uploadHttp')
      let d = JSON.parse(res.data)
      if (d.code == 200) {
        return d.result
      }
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[event.name].length
      lists.map((item) => {
        this[event.name].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[event.name][fileListLen]
        this[event.name].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    async uploadFilePromise(url) {
      const res = await commonUploadPic(url, 1)
      console.log(res, 'uploadHttp')
      let d = JSON.parse(res.data)
      if (d.code == 200) {
        return d.result
      }
    },
    // 删除图片
    deletePic(event) {
      this.tp.splice(event.index, 1)
    },
    deletePicSb(event) {
      this.tpSb.splice(event.index, 1)
    },
    deletePicSt(event) {
      this.tpSt.splice(event.index, 1)
    },
    submit() {
      if (this.item.type == 1) {
        this.omMissionHandle()
      } else if (this.item.type == 2) {
        this.addOmPoliceHandle()
      } else if (this.item.type == 3) {
        this.editWaterCommit()
      } else if (this.item.type == 4) {
        this.editProFeedback()
      }
    },
    handleGetMore() {
      this.page++;
      if (this.total && this.workList.length >= this.total) {
        return;
      }
      this.getAllWorkOrderList();
    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  height: 100vh;
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}

.posBox {
  position: absolute;
  top: 330rpx;
}
.nodata {
  margin-top: 280rpx;
  margin-left: 139rpx;
  .noDataImg {
    width: 472rpx;
    height: 522rpx;
  }
}
.top-bg {
  width: 100%;
  height: 335rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;

  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
  .scrollTab{
				 margin: 25rpx 32rpx 0 32rpx;	 
		}
  .checkTab {
    color: #ffffff;
    display: flex;
    align-items: center;
    .checkItem {
      font-weight: bold;
      display: inline-block;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
	  margin-right: 15rpx;
      .selectedBottom {
        width: 29rpx;
        height: 4rpx;
        background: #ffffff;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        z-index: 0;
        margin-top: 4rpx;
      }
    }
    .unchecked {
      font-weight: 400;
      font-size: 24rpx;
	  
    }
  }
}

.header-wrap {
  // position: relative;
  display: flex;
  align-items: center;
  // justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 28rpx;
  margin: 32rpx;
  letter-spacing: 1rpx;

  .item_search {
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    width: 66%;
    position: relative;
    margin-right: 2px;
    .clearImg {
      position: absolute;
      width: 25rpx;
      height: 25rpx;
      right: 0;
      bottom: 16rpx;
    }
	.clearImg2 {
	  position: absolute;
	  width: 25rpx;
	  height: 25rpx;
	  right: 18rpx;
	  bottom: 16rpx;
	}
  }

  .selectName {
    width: 160rpx;
    height: 56rpx;
    padding: 0 10rpx;
    line-height: 56rpx;
    background: #f2f6f7;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    margin-right: 15rpx;
    overflow: hidden;

    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 30rpx;
    }
  }
}

.scroll-Y {
  height: 100%;
}

.task-item {
  width: 636rpx;
  // height: 556rpx;
  position: relative;
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 16rpx 24rpx 30rpx 28rpx;
  font-weight: bold;
  font-size: 24rpx;
  .clStatus {
    position: absolute;
    top: 70rpx;
    right: 10rpx;
  }
}

.titleName {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34rpx;
  font-size: 28rpx;

  .line {
    width: 8rpx;
    height: 20rpx;
    background: rgba(39, 105, 247, 0.6);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    margin-right: 14rpx;
  }

  .grey {
    font-weight: 400;
    font-size: 18rpx;
    color: #989898;
    margin-left: 12rpx;
  }

  .type {
    width: 102rpx;
    height: 40rpx;
    background: #f2e5ff;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    line-height: 40rpx;
    text-align: center;
    ont-weight: bold;
    font-size: 20rpx;
    color: #903cff;
  }

  .type2 {
    background: #d5efe7;
    color: #74cdaf;
  }

  .type3 {
    background: #e5eeff;
    color: #3c8aff;
  }

  .type4 {
    background: #fbf2d1;
    color: #fbb322;
  }
}

.info-row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  text {
    margin-right: 15rpx;
    width: 30%;
  }
}
.info-row3-gd {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  color: #5e5e5e;
  text {
    width: 18%;
	color: #989898
  }
}
.info-row3-yw {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  text {
    width: 20%;
  }
}
.filterType {
  display: flex;
  color: #5e5e5e;
  .text {
    white-space: nowrap;
    color: #989898;
    display: inline-block;
    margin-right: 30rpx;
  }
}
.info-row {
  color: #5e5e5e;
  margin-bottom: 14rpx;

  text {
    width: 18%;
    color: #989898;
    display: inline-block;
  }
  .ellipsis {
    width: 80%;
    color: #5e5e5e;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25rpx;
  }
}
.info-row-yw {
  color: #5e5e5e;
  margin-bottom: 14rpx;

  text {
    color: #989898;
    display: inline-block;
    margin-right: 30rpx;
  }
}
.isIssue1 {
  width: 96rpx;
  height: 36rpx;
  background: #d5efdd;
  font-weight: bold;
  font-size: 20rpx;
  color: #66c463;
  line-height: 36rpx;
  text-align: center;
}
.isIssue2 {
  width: 96rpx;
  height: 36rpx;
  background: #ffebef;
  font-weight: bold;
  font-size: 20rpx;
  color: #fc8382;
  line-height: 36rpx;
  text-align: center;
}
.uploadButton {
  width: 228rpx;
  height: 64rpx;
  background: #ffffff;
  border-radius: 6rpx;
  border: 1rpx solid #3c8aff;
  font-weight: 400;
  font-size: 24rpx;
  color: #3c8aff;
  line-height: 64rpx;
  text-align: center;
  margin-left: 42rpx;
  .upload {
    width: 27rpx;
    height: 20rpx;
    margin-right: 12rpx;
    vertical-align: middle;
  }
}
.btn-item {
  position: absolute;
  right: 26rpx;
  bottom: 32rpx;
  width: 168rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background: #3c8aff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}

.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}

.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
}

.submitBtn {
  margin: 132rpx 48rpx 32rpx 48rpx;
}

/deep/ .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}

/deep/ .u-search__content {
  padding: 0 10rpx !important;
}
/deep/ .u-input__content__field-wrapper__field {
  font-size: 24rpx !important;
}
.custom-tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #f5f5f5;
}
.icon {
  margin-right: 5px;
}
/deep/ .u-icon__icon {
  font-size: 30rpx !important;
}
/deep/ .u-textarea__field {
  width: 394rpx !important;
  color: #5e5e5e !important;
  font-size: 24rpx !important;
}
/deep/ .u-textarea {
  border: 1rpx solid #efefef;
  border-radius: 10rpx;
  font-size: 24rpx !important;
}
.width {
  width: 21% !important;
}
</style>